<template>
    <div class="login-container">
        <el-card class="login-card">
            <div class="login-body">
                <div class="login-title">
                    <img src="../../assets/lyh.png" class="logo-img">
                    <span class="title-text">管理员登录</span>
                </div>
                <el-form ref="form" :model="userForm" class="login-form">
                    <el-input 
                        placeholder="请输入管理员账号" 
                        v-model="userForm.accountNumber" 
                        class="login-input animated-input"
                        @focus="inputFocus"
                        @blur="inputBlur">
                        <template slot="prepend">
                            <i class="el-icon-user-solid input-icon"></i>
                        </template>
                    </el-input>
                    <el-input 
                        placeholder="请输入管理员密码" 
                        v-model="userForm.adminPassword" 
                        class="login-input animated-input"
                        @keyup.enter.native="login"  
                        show-password
                        @focus="inputFocus"
                        @blur="inputBlur">
                        <template slot="prepend">
                            <i class="el-icon-lock input-icon"></i>
                        </template>
                    </el-input>
                    <div class="login-submit">
                        <el-button 
                            type="primary" 
                            @click="login" 
                            class="login-btn"
                            :loading="loading">
                            登录
                        </el-button>
                        <el-button 
                            type="success" 
                            @click="$router.push('/login')" 
                            class="user-login-btn">
                            用户登录
                        </el-button>
                    </div>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "AdminLogin",
        data() {
            return {
                userForm: {
                    accountNumber: '',
                    adminPassword: ''
                },
                loading: false
            };
        },
        methods: {
            login() {
  this.loading = true;
  this.$api.adminLogin({
    accountNumber: this.userForm.accountNumber,
    adminPassword: this.userForm.adminPassword
  }).then(res => {
    if (res.status_code === 1) {
      // ✅ 保存token到本地存储
      localStorage.setItem('token', res.data.token)
      
      // ✅ 设置axios默认请求头
      this.$api.service.defaults.headers.common['Authorization'] = `Bearer ${res.data.token}`
      
      // ✅ 同步更新全局状态
      this.$sta.isLogin = true
      this.$sta.adminName = res.data.adminName
      this.$router.replace({ path: '/platform-admin' })
      
      this.$message.success('登录成功！')
    }
    this.loading = false
  }).catch(e => {
    this.loading = false
    this.$message.error(e.message || '登录失败')
  })
},
            inputFocus(event) {
                event.target.parentNode.classList.add('input-focused');
            },
            inputBlur(event) {
                event.target.parentNode.classList.remove('input-focused');
            }
        }
    }
</script>

<style scoped>
    .login-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    }
    
    .login-card {
        width: 380px;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        border: none;
    }
    
    .login-card:hover {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        transform: translateY(-5px);
    }
    
    .login-body {
        padding: 40px;
    }
    
    .login-title {
        padding-bottom: 30px;
        text-align: center;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .logo-img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }
    
    .title-text {
        font-size: 24px;
        color: #e75c09;
        letter-spacing: 1px;
    }
    
    .login-form {
        margin-top: 20px;
    }
    
    .login-input {
        margin-bottom: 25px;
        transition: all 0.3s ease;
    }
    
    .animated-input {
        transition: all 0.3s ease;
    }
    
    .animated-input:hover {
        transform: translateY(-2px);
    }
    
    .input-focused {
        box-shadow: 0 0 0 2px rgba(231, 92, 9, 0.2);
    }
    
    .input-icon {
        font-size: 18px;
        color: #e75c09;
    }
    
    .login-submit {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
    }
    
    .login-btn {
        width: 48%;
        height: 45px;
        font-size: 16px;
        letter-spacing: 1px;
        background: linear-gradient(to right, #e75c09, #ff7b25);
        border: none;
        transition: all 0.3s ease;
    }
    
    .login-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(231, 92, 9, 0.3);
    }
    
    .user-login-btn {
        width: 48%;
        height: 45px;
        font-size: 16px;
        letter-spacing: 1px;
        transition: all 0.3s ease;
    }
    
    .user-login-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(67, 160, 71, 0.3);
    }
</style>